<template>
<div class="MainCase5">
<Row>
<Col span="20" class="left">
	<Row>
		<Col span="18"><span>年份：</span>
			<Select v-model="yearValue" style="width:150px" @on-select="handleYearSelect">
				<Option v-for="year in yearList" :value="year.value" :key="year.value">{{ year.label }}</Option>
			</Select>&nbsp;
		</Col>
		<Col span="6">
			<Input v-model="searchKey" search enter-button placeholder="当事人" @on-search="handleSearch"/>
		</Col>
	</Row>
	<br>
	<Table ref="table" :columns="columns" :data="data" row-key="case_no"
	:max-height="maxHeight" @on-row-click="handleRowClick" border highlight-row>
	</Table>
</Col>
<Col span="4" class="right">
	<div v-for="n in docPreviews" :key="n.value" class="ivu-mb-8">
		<Button custom-icon="iconfont icon-Word" type="warning" target="_blank" ghost 
		:to="'/preview?to='+n.value+'&case_no='+selectRow.case_no+'&case_year='+selectRow.case_year" 
		>{{n.text}}
		</Button>
	</div>
</Col>
</Row>
</div>
</template>
<script>
import {dateUtils} from '@/libs/tools.js'
export default{
	data(){
		return {
			columns:[
				{title:'编号',key:'case_no',minWidth:70},
				{title:'案由',key:'cause_name',minWidth:220,ellipsis:true},
				{title:'当事人',key:'party_name',minWidth:160,ellipsis:true},
				{title:'类别',key:'party_type',minWidth:80},
				{title:'程序',key:'procedure',minWidth:100},
				{title:'案件状态',key:'status',minWidth:120},
				{title:'承办人',key:'legal_name',minWidth:80},
				{title:'创建时间',key:'create_time',minWidth:100},
			],
			data:[],
			selectRow:{},
			searchKey:'',
			yearList:dateUtils.getLast3Years(),
			yearValue:dateUtils.getCurrentYear(),
			docPreviews:[]
		}
	},
	computed:{
		maxHeight(){
		  return window.innerHeight-220
		}
	},
	methods:{
		handleRowClick(row,index){
			this.selectRow=row
			if(row.docs!=null){
				const array=row.docs.split(",")
				if(row.procedure=='一般程序'){
					this.docPreviews=this.$store.getters.getAllDoc.filter(e=>{
						return array.includes(e.value)
					})
				}else{
					this.docPreviews=this.$store.state.docs.doc5.filter(e=>{
						return array.includes(e.value)
					})
				}
				
			}else{
				this.docPreviews=[]
			}
		},
		getMainCase5List(){
		   this.$axios.post("mainCase5List.action",{str1:this.searchKey,int1:this.yearValue}).then(res=>{
				this.data=res.data
		   })
		},
		handleYearSelect(n){
			console.info(n)
			this.yearValue=n.value
			this.searchKey=''
			this.getMainCase5List()
		},
		handleSearch(value){
			this.searchKey=value
			this.getMainCase5List()
		},
	},
	mounted() {
		this.getMainCase5List()
	}
}
</script>
<style scoped>
.left{
padding: 16px;
}
.right{
padding: 16px;
}
</style>